import React from 'react';
// import Head from 'next/head'
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { Button, TextField, FormControl } from '@material-ui/core';

import styled from 'styled-components'
import withRoot from './withRoot';


const PaginationRow = styled.div`
text-align: right;
margin: 40px 0 20px 0;
display:${props => props.displays};
display:${props => " -webkit-" + props.displays};
align-items:   flex-end;
justify-content: flex-end;
`;
const SearchForm = styled.form`
display: inline-block;

`;
const Pagination = styled(Button)`

margin-left:8px !important;
`;


const styles = theme => ({
    formControl: {
        margin: theme.spacing.unit,
        // minWidth: 120,
        width: '60px',
        minWidth: '60px',
        marginBottom: 0,
    },

    pagination: {
        minWidth: '30px !important'
    }
});


class Paging extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            pages: [],
            jump_page: 1
        }


        this.handle_page = this.handle_page.bind(this);
        this.jump_page = this.jump_page.bind(this);
        this.submit_jump_page = this.submit_jump_page.bind(this);
    }


    handle_page(ev, value, page) {
        let that = this
        switch (value) {
            case 'first':
                this.props.transferPages(1)
                break;
            case 'last':
                this.props.transferPages(that.props.page_num)
                break;
            case 'prev':
                this.props.transferPages(that.props.select_page - 1)
                break;
            case 'next':
                this.props.transferPages(that.props.select_page + 1)
                break;
            case 'page':
                this.props.transferPages(page)
                break;


        }
    }
    jump_page(ev) {

        this.setState({
            jump_page: ev.target.value
        });
    }
    submit_jump_page(ev) {
        ev.preventDefault();
        if (isNaN(this.state.jump_page)) {
            // return this.paging_request(parseInt(1));
            return this.props.transferPages(parseInt(1))
        }
        // this.paging_request(parseInt(this.state.jump_page));
        this.props.transferPages(parseInt(this.state.jump_page))
    }

    render() {
        const { classes, select_page, page_num } = this.props,
            { jump_page } = this.state;

        let pages = [];
        if (page_num < 12) {
            for (let i = 0; i < page_num; i++) {
                pages.push(<Pagination key={i} variant="contained" size="small" color="primary" onClick={(ev, value, page) => this.handle_page(ev, 'page', i + 1)} disabled={select_page == i + 1 ? true : false} className={classes.pagination}  >
                    {i + 1}
                </Pagination>)
            }
        } else if (select_page < 7) {
            for (let i = 0; i < 11; i++) {
                pages.push(<Pagination key={i} variant="contained" size="small" color="primary" onClick={(ev, value, page) => this.handle_page(ev, 'page', i + 1)} disabled={select_page == i + 1 ? true : false} className={classes.pagination}  >
                    {i + 1}
                </Pagination>)
            }
        } else if (select_page > page_num - 11) {
            for (let i = page_num - 11; i < page_num; i++) {
                pages.push(<Pagination key={i} variant="contained" size="small" color="primary" onClick={(ev, value, page) => this.handle_page(ev, 'page', i + 1)} disabled={select_page == i + 1 ? true : false} className={classes.pagination}  >
                    {i + 1}
                </Pagination>)
            }
        } else {
            for (let i = select_page - 6; i < select_page + 5; i++) {
                pages.push(<Pagination key={i} variant="contained" size="small" color="primary" onClick={(ev, value, page) => this.handle_page(ev, 'page', i + 1)} disabled={select_page == i + 1 ? true : false} className={classes.pagination}  >
                    {i + 1}
                </Pagination>)
            }
        }
        return (
            <div>


                <PaginationRow displays={page_num > 1 ? 'flex' : 'none'} >

                    {
                        (() => {
                            if (select_page > 6) {
                                return (

                                    <Pagination variant="contained" size="small" color="primary" onClick={(ev, value) => this.handle_page(ev, 'first')}   >
                                        首页
                                    </Pagination>

                                )
                            }

                        })()
                    }
                    {
                        (() => {
                            if (page_num > 1 && select_page !== 1) {
                                return (


                                    <Pagination variant="contained" size="small" color="primary" onClick={(ev, value) => this.handle_page(ev, 'prev')}   >
                                        上一页
                                    </Pagination>


                                )
                            }

                        })()
                    }
                    {
                        pages.map((item) => {
                            return item
                        })
                    }
                    {
                        (() => {
                            if (page_num > 1 && page_num !== select_page) {
                                return (

                                    <Pagination variant="contained" size="small" color="primary" onClick={(ev, value) => this.handle_page(ev, 'next')}   >
                                        下一页
                                    </Pagination>

                                )
                            }

                        })()
                    }
                    <SearchForm onSubmit={this.submit_jump_page}  >
                        <FormControl className={classes.formControl}   >
                            <TextField
                                autoComplete="off"
                                id="article_search_input"
                                value={jump_page}
                                onChange={(ev) => this.jump_page(ev)}
                            />
                        </FormControl>
                    </SearchForm>
                    {
                        (() => {
                            if (page_num > 10 && select_page < page_num - 10) {
                                return (

                                    <Pagination variant="contained" size="small" color="primary" onClick={(ev, value) => this.handle_page(ev, 'last')}     >
                                        共{page_num}页
                                     </Pagination>


                                )
                            }

                        })()
                    }

                </PaginationRow>

            </div>
        );
    }
}
Paging.propTypes = {
    classes: PropTypes.object.isRequired,
    // theme: PropTypes.object.isRequired,
};

export default withRoot(withStyles(styles)(Paging));